<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
  <title>Hello Electron!</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1>Hello World!</h1>
  <div>Node.js version: <span id="node-version"></span></div>
  <div>Chromium version: <span id="chrome-version"></span></div>
  <div>Electron version: <span id="electron-version"></span></div>

  <hr>
  <div>Current theme source: <span id="theme-source">System</span></div>
  <button id="toggle-dark-mode">Toggle Dark Mode</button>
  <button id="reset-to-system">Reset to System Theme</button>

  <hr>
  <button id="test-bluetooth">Test Bluetooth</button>
  <div>Selected bluetooth device: <span id="device-name"></span></div>

  <hr>
  <button id="test-webhid">Test WebHID</button>
  <div id="granted-devices"></div>
  <div id="granted-devices2"></div>

  <hr>
  <div>Alt+Shift+I or Opt+Cmd+I to print message in console</div>
  <div>Alt+Ctrl+I or Opt+Cmd+I to print message in console or global shortcut</div>

  <hr>
  <div>Last key pressed: <span id="last-keypress"></span></div>

  <hr>
  <div>Ctrl+I go see a meesage printed to the console</div>

  <hr>
  <div>
    <div id="drag1" style="border: 2px solid black;border-radius: 3px;padding: 5px;display: inline-block;"
      draggable="true">Drag File1</div>
    <div id="drag2" style="border: 2px solid black;border-radius: 3px;padding: 5px;display: inline-block;"
      draggable="true">Drag File2</div>
  </div>

  <hr>
  <div>
    <button id="show-notification">Show Notification</button>
    <div id="notify-output"></div>
  </div>

  <hr>
  <div>Input words and right click to test spell checker:
    <input type="text" name="spellcheck-txt" >
  </div>

  <hr>
  <script src="render.js"></script>
</body>

</html>